<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
    <style>
        .parent {
            width: 2000px;
            height: 2800px;
            border: 2px solid;
            margin: auto;
            /* position: relative; */
        }

        .parent div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            padding: 20px;
            border: 2px solid red;
            /* position: absolute;
            left: 40px;
            top: 100px; */
        }
    </style>
</head>

<body>
    <div style="width: 200px;height: 200px; background-color: aqua;"></div>

    <div class="parent">
        <div id="child"></div>
        <button id="btn">窗口滚动</button>
        <button id="btn2">打开新窗口</button>
        <button id="btn3">关闭窗口</button>
        <button id="btn4">再再跳转</button>
    </div>

    <a href="./location.html">跳转</a>
    <script>
        // ====== window的属性
        // 1.窗口大小
        //视图区域的宽高
        // console.log(innerWidth);
        // console.log(window.innerHeight);
        // //浏览器窗口的宽高
        // console.log(window.outerWidth);
        // console.log(window.outerHeight);

        // // 2.窗口位置 相对于屏幕左上角的坐标
        // //以前ie不支持下面的写法，现在两组属性通用
        // console.log(window.screenLeft);
        // console.log(window.screenTop);
        // console.log(window.screenX);
        // console.log(window.screenY);

        // // 3.元素的位置 
        // // 得到的是相对于有定位属性的祖先元素的位置  
        // // 如果没有定位，得到相对于body的位置
        // console.log(child.offsetLeft);
        // console.log(child.offsetTop);

        // // 4.元素的真实大小
        // console.log(child.offsetWidth);
        // console.log(child.offsetHeight);

        // // 5.滚动位置
        // console.log(window.pageXOffset);
        // console.log(window.pageYOffset);

        //=====window常见方法
        // 1.系统对话框
        //警告框
        // window.alert('一定要删除吗？')
        //确认框
        // let boo=confirm('are you sure?')
        // console.log(boo);
        //输入框  接收到的是string类型的值
        // let str=prompt('请输入你的电话号码');
        // console.log(typeof str);

        //2.窗口滚动位置
        // btn.onclick = function () {
        //     // 让页面滚动到200，200的位置
        //     // 始终相对于页面原点的坐标
        //     // window.scrollTo(400,400)
        //     //相对于当前的位置叠加
        //     window.scrollBy(0, 200)
        // }

        //3.打开窗口  open('url',target,'字符串')
        // let btn2 = document.getElementById('btn2')
        // let i;
        // btn2.onclick = function () {
        //     i = window.open('index.html', '_blank')
        // }

        // btn3.onclick = function () {
        //     i.close()
        // }
        // 4.定时器
        //间歇调用计时器
        // let id=setInterval('函数','间隔时间ms') 清除定时器clearInterval(id)
        //间隔一定时间调用一次函数，会返回一个id值，可以用于清除定时器
        // let num = 0;
        // let test = function () {
        //     console.log('hello~~', num);
        //     num++;
        //     if (num > 5) {
        //         clearInterval(id1)
        //     }

        // };
        // let id1 = setInterval(test, 1000)

        // 延时调用计时器
        // let id=setTimeout(函数, 延迟时间)      clearTimeout(id)
        //延迟一定时间调用，返回一个id值，可以用于关闭计时器

        // setTimeout(function () {
        //     console.log('hi~~~');
        // }, 3 * 1000)


        // // 练习：在控制台做一个倒计时，并在0的时候停掉
        // let num = 10;
        // let id3 = setInterval(function () {
        //     console.log(num);
        //     num--;
        //     if (num == 0){
        //         clearInterval(id3)
        //     }

        // }, 1000)



        // btn4.onclick=function(){
        //     location.assign('history.html')
        // }


        var a=10;
        delete window.a;
        console.log(window);
        console.log(window.a);

        let obj={
            name:'zhangsan',
            age:18
        }

        delete obj.age;
        console.log(obj);


    </script>
</body>

</html>